<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <picker-view type="category" v-model="query.category_id" placeholder="信息类型" :filter="{is_sale:1,is_member_category:1}"></picker-view>
                </el-form-item>
                <el-form-item>
                    <picker-view type="visitStatus" v-model="query.status" placeholder="回访状态"></picker-view>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="query.contact_type" placeholder="联系类型" style="width: 100px;">
                        <el-option label="手机号" value="1"></el-option>
                        <el-option label="微信号" value="2"></el-option>
                        <el-option label="座机" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="联系方式" clearable></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="doSearch">搜索</el-button>
            </el-form>
        </div>

        <!-- 更多搜索 -->
        <div class="right">
            <el-popover placement="bottom" width="500" trigger="click">
                <el-form :model="query" label-width="80px" label-position="right" @submit.native.prevent>
                    <el-form-item label="客户姓名">
                        <el-input v-model="query.fullname" placeholder="请输入客户姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="渠道">
                        <source-picker-view ref="sourcePickerRef" type="source" :checkStrictly="true" v-model="query.source_id" placeholder="请选择渠道"></source-picker-view>
                    </el-form-item>
                    <el-form-item label="部门">
                        <dpt-picker-view ref="sourcePickerRef" type="department" v-model="query.department_id" placeholder="请选择部门" :check-strictly="true"></dpt-picker-view>
                    </el-form-item>
                    <el-form-item label="企业">
                        <el-input v-model="query.company_name" placeholder="企业"></el-input>
                    </el-form-item>
                    <el-form-item label="预产期">
                        <el-input v-model="query.event_date" placeholder="预产期"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="query.table_amount" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="创建人">
                        <picker-view type="user" v-model="query.create_id" :multiple="true" placeholder="请选择创建人"></picker-view>
                    </el-form-item>
                    <el-form-item label="选择时间">
                        <el-date-picker v-model="query.date_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doSearch">搜索</el-button>
                        <el-button type="warning" @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-button slot="reference" type="primary"><i class="el-icon-search" style="margin-right: 5px"></i>更多</el-button>
            </el-popover>
        </div>
    </div>

    <el-table ref="tableView" height="tableHeight" class="page-body" v-loading="loading" :data="tableData" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showDetailView(scope.row)">查看</el-button>
            </template>
        </el-table-column>
        <el-table-column label="客户姓名" prop="fullname"></el-table-column>
        <el-table-column label="手机号" prop="contact.contact"></el-table-column>
        <el-table-column label="标签" align="center">
            <template slot-scope="scope">
                <el-tag class="customer-tag" type="primary">{{ scope.row.visit_status.title }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建人" prop="creator.realname"></el-table-column>
        <el-table-column label="渠道" prop="source.title"></el-table-column>
        <el-table-column label="分配状态" align="center">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.allocate.assign_status == 0" type="danger">未分配</el-tag>
                <el-tag v-else type="success">已分配</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page-foot">
        <div class="left">
            <el-button v-if="(/^\d{11}$/.test(query.keyword) || query.contact_type==2) && isSearch && tableData.length > 0" type="primary" icon="el-icon-bottom-right" @click="getCustomer()">全号获取</el-button>
        </div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>
    <!-- 客资详情 -->
    <detail-view ref="detailView"></detail-view>
</div>
</template>

<script>
import {
    getMemberListApi,
    doAcquisitionApi
} from "@/api/customer/member.js";
import pagination from "@/components/mixins/pagination.vue";
import sourcePickerView from "@/components/picker/source.vue";
import dptPickerView from "@/components/picker/department.vue";
import pickerView from "@/components/picker/select.vue";
import detailView from './detail.vue'

export default {
    provide() {
        return {
            pageIndex: this
        };
    },
    components: {
        detailView,
        sourcePickerView,
        dptPickerView,
        pickerView
    },
    mixins: [pagination],
    data() {
        return {
            query: {
                fullname: "",
                contact_type: "1",
                keyword: "",
                source_id: "",
                creator_id: [],
                department_id: "",
                company_name: "",
                event_date: "",
                table_amount: "",
                date_range: "",
            },
            isSearch: false,
            loading: false,
            tableData: [],
            dateTypeList: [{
                    id: "create_time",
                    title: "创建时间",
                },
                {
                    id: "allocate_time",
                    title: "分配时间",
                },
                {
                    id: "visit_time",
                    title: "跟进时间",
                },
            ],
            departmentTree: [],
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        doSearch() {
            this.isSearch = true;
            this.resetPg();
            this.getTableData();
        },
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;
            this.loading = true;
            getMemberListApi(params).then(res => {
                this.loading = false;
                this.tableData = res.data.list;
                this.setPg(res);
            });
        },
        resetSearch() {
            this.query = {
                fullname: "",
                contact_type: "1",
                keyword: "",
                source_id: "",
                creator_id: [],
                department_id: "",
                company_name: "",
                event_date: "",
                table_amount: "",
                date_range: "",
            };
            this.isSearch = false;
        },
        // 显示客资详情
        showDetailView(row) {
            this.$refs["detailView"].showDrawer(row);
        },
        getCustomer() {
            let params = {};
            params['mobile'] = this.query.keyword;
            doAcquisitionApi(params).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg);
                } else {
                    this.$message.warning(res.msg);
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.table-list {
    .customer-tag {
        margin-right: 5px;
    }
}

.bottom-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .funcs-box {
        flex: 1;
        text-align: left;

        .func-item {
            margin-right: 8px;
        }
    }

    .pagination-box {
        flex: 1;
        text-align: right;
    }
}
</style>
